<template>
  <!-- 学员详情 -->
  <div class="studentDetailsBox">
    <x-header :left-options="{showBack: true,backText:'学员详情'}" class="headerBox"></x-header>
    <div class="headBox">
      <img :src="user.headImg" class="studentInfoBg" />
      <div class="studentInfos">
        <div class="studentTopBox">
          <img src="../assets/images/studentinfo04.png" class="studentIcon" />
          <div class="userImgBox">
            <img :src="user.headImg" class="head" />
            <img src="../assets/images/studentinfo05.png" class="headIcon" />
          </div>
          <img src="../assets/images/studentinfo03.png" class="studentIcon" />
        </div>
        <div class="name flex_center">
          {{user.name}}
          <img v-if="user.sex=='man'" src="../assets/images/icon_boy.png" />
          <img v-else src="../assets/images/girl02.png" />
        </div>
        <div class="profiles">{{user.profiles}}</div>
        <div class="flex_sb userAbout">
          <div>
            <div>{{user.fans}}</div>
            <div class="hint">粉丝</div>
          </div>
          <div>
            <div>{{user.follow}}</div>
            <div class="hint">关注</div>
          </div>
          <div>
            <div>{{user.group}}</div>
            <div class="hint">小组</div>
          </div>
        </div>
      </div>
    </div>
    <tab class="tabBox" bar-active-color="#1f7aff" :line-width="2" v-model="tabIndex">
      <tab-item selected @on-item-click="onItemClick">个人介绍</tab-item>
      <tab-item @on-item-click="onItemClick">在学课程</tab-item>
      <tab-item @on-item-click="onItemClick">在学班级</tab-item>
      <tab-item @on-item-click="onItemClick">加入收藏</tab-item>
      <tab-item @on-item-click="onItemClick">加入小组</tab-item>
    </tab>
    <div ref="contenBox" class="tabContentBox">
      <!-- 个人介绍 -->
      <div v-if="tabIndex==0" class="introduce">
        <div class="flex">
          <img :src="user.headImg" class="briefHead" />
          <div class="briefName">
            {{user.name}}
            <img v-if="user.sex == 'man'" src="../assets/images/icon_boy.png" />
            <img v-else src="../assets/images/girl02.png" />
          </div>
        </div>
        <div class="briefTxt" v-for="(item,index) in user.briefTxts" :key="index">{{item.briefTxt}}</div>
      </div>
      <!-- 在学课程 -->
      <div
        v-if="tabIndex==1"
        class="courseBox"
        v-for="(item,index) in user.curriculum"
        :key="index"
      >
        <div class="leftCont">
          <img :src="item.courseImg" class="courseImg" />
        </div>
        <div class="rightCont">
          <div class="rightContTitle">{{item.courseName}}</div>
          <div class="curriculumTeacher">讲师：{{item.teacher}}</div>
          <div class="flex_sb">
            <div class="classHour">
              课时
              <span>{{item.classHour}}节</span>
            </div>
            <div>
              <span class="process" v-if="item.process < 100">{{item.process}}%</span>
              <img :src="item.tick" v-else="item.process == 100" class="tick" />
            </div>
          </div>
          <x-progress :percent="parseInt(item.process)" :show-cancel="false" class="progressBox"></x-progress>
          <!-- <progress percent="{{item.process}}" activeColor='#1F7AFF' border-radius="5" stroke-width="4" active /> -->
        </div>
      </div>
      <!-- 在学班级 -->
      <div v-if="tabIndex==2" v-for="(item, index) in user.classList" class="classBox">
        <div class="classInfos">
          <img :src="item.classImg" />
          <div class="classInfo">
            <div class="fs_26">
              {{item.className}} | {{item.classNum}}
              <span
                :class="item.stateColor? 'color_orange2':'color_blue'"
              >({{item.state? '进行中':'已完结'}})</span>
            </div>
            <div class="fs_26">班主任：{{item.teacher}}</div>
            <div class="fs_26 color_orange2">总成员：{{item.num}}人</div>
          </div>
        </div>
        <div class="classItem">
          <div>课程：{{item.course}}</div>
          <div>话题：{{item.topic}}</div>
          <div>笔记：{{item.note}}</div>
        </div>
        <div class="bottomLine"></div>
      </div>
      <!-- 收藏课程 -->
      <swipeout>
        <swipeout-item
          v-if="tabIndex==3"
          v-for="(item,index) in user.collectList"
          class="collectBox"
          transition-mode="follow"
          :key="index"
        >
          <div slot="right-menu">
            <swipeout-button class="deletBtn">删除</swipeout-button>
            <swipeout-button class="shareBtn">分享</swipeout-button>
          </div>
          <div slot="content" class="demo-content cardBox">
            <a href>
              <div class="item-ans">
                <div class="courseImg">
                  <img class="img" :src="item.courseImg" />
                </div>
                <div class="hotCourseInfo">
                  <div class="hotCourseInfo_title">{{item.hotCourseInfo_title}}</div>
                  <div class="hotCourseInfo_count">{{item.mark}}分 | {{item.peopleNum}}人学过</div>
                  <div class="mt_35">
                    <span class="price_now">￥{{item.price_now}}</span>
                    <span class="price_before">{{item.price_before}}</span>
                    <span class="hotCourseInfo_tips">{{item.hotCourseInfo_tips}}</span>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </swipeout-item>
      </swipeout>
      <!-- 加入小组 -->
      <div v-if="tabIndex==4" v-for="(item,index) in user.hotGroupList" class="groupList">
        <div class="groupList-left">
          <div class="picture">
            <img :src="item.img" />
          </div>
          <div class="grouplist-type">
            <div class="grouplist-type-title">{{item.title}}</div>
            <div class="grouplist-type-member flex">
              <img src="../assets/images/head-sm.png" mode="scaleToFill" />
              {{item.groupLeader}}
            </div>
          </div>
        </div>
        <div class="groupList-right">全部成员{{item.total}}人</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, Tab, TabItem, XProgress, Swipeout, SwipeoutItem, SwipeoutButton } from "vux";
export default {
  components: {
    XHeader,
    Tab,
    TabItem,
    XProgress,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  data() {
    return {
      tabIndex: 0,
      user: {
        name: '罗晓飞',
        sex: 'woman',
        headImg: require('../assets/images/chidrens01.png'),
        profiles: '在教学中，不断探索灵活、高效的学习方法，联系生活，深入浅出，让学生自觉自发地去体会语文之美，深受学生喜爱。',
        fans: '859',
        follow: '29',
        group: '8',
        // 个人介绍
        briefTxts: [
          {
            briefTxt: '认为教授语文的过程实际上就是“接触美-挖掘美-领会美-创造美”的过程。'
          },
          {
            briefTxt: '在教学中，不断探索灵活、高效的学习方法，联系生活，深入浅出，让学生自觉自发地去体会语文之美，深受学生喜爱。-挖掘美-领会美-创造美”的过程。'
          },
          {
            briefTxt: '认为教授语文的过程实际上就是“接触美-挖掘美-领会美-创造美”的过程。'
          },
          {
            briefTxt: '在教学中，不断探索灵活、高效的学习方法，联系生活，深入浅出，让学生自觉自发地去体会语文之美，深受学生喜爱。-挖掘美-领会美-创造美”的过程。'
          }
        ],
        // 在学课程
        curriculum: [
          {
            courseImg: require('../assets/images/course01.png'),
            courseName: '爱语文，做有修养的人',
            teacher: '林越峰',
            classHour: '36',
            process: '40',
            tick: require('../assets/images/tick.png')
          },
          {
            courseImg: require('../assets/images/course02.png'),
            courseName: '爱语文，做有修养的人',
            teacher: '林越峰',
            classHour: '26',
            process: '100',
            tick: require('../assets/images/tick.png')
          },
          {
            courseImg: require('../assets/images/course01.png'),
            courseName: '爱语文，做有修养的人',
            teacher: '林越峰',
            classHour: '36',
            process: '40',
            tick: require('../assets/images/tick.png')
          },
          {
            courseImg: require('../assets/images/course02.png'),
            courseName: '爱语文，做有修养的人',
            teacher: '林越峰',
            classHour: '26',
            process: '80',
            tick: require('../assets/images/tick.png')
          }
        ],
        // 在学班级
        classList: [
          {
            classImg: require('../assets/images/head06.png'),
            className: '一年级英语',
            classNum: '一班',
            stateColor: true,
            state: true,
            teacher: '成然',
            num: '28',
            course: '4',
            topic: '2',
            note: '4'
          },
          {
            classImg: require('../assets/images/head06.png'),
            className: '一年级英语',
            classNum: '一班',
            stateColor: false,
            state: false,
            teacher: '成然',
            num: '28',
            course: '4',
            topic: '2',
            note: '4'
          },
          {
            classImg: require('../assets/images/head06.png'),
            className: '一年级英语',
            classNum: '一班',
            stateColor: true,
            state: true,
            teacher: '成然',
            num: '28',
            course: '4',
            topic: '2',
            note: '4'
          },
          {
            classImg: require('../assets/images/head06.png'),
            className: '一年级英语',
            classNum: '一班',
            stateColor: false,
            state: false,
            teacher: '成然',
            num: '28',
            course: '4',
            topic: '2',
            note: '4'
          }
        ],
        // 我的收藏
        collectList: [
          {
            courseImg: require("../assets/images/img02.png"),
            hotCourseInfo_title: "爱语文，做有修养的人",
            mark: "4.8",
            peopleNum: "1210",
            price_now: "399",
            price_before: "￥499",
            hotCourseInfo_tips: "(会员免费)"
          },
          {
            courseImg: require("../assets/images/img02.png"),
            hotCourseInfo_title: "爱语文，做有修养的人",
            mark: "4.8",
            peopleNum: "1210",
            price_now: "399",
            hotCourseInfo_tips: "(会员免费)"
          },
          {
            courseImg: require("../assets/images/img02.png"),
            hotCourseInfo_title: "爱语文，做有修养的人",
            mark: "4.8",
            peopleNum: "1210",
            price_now: "399",
            price_before: "￥499",
            hotCourseInfo_tips: "(会员免费)"
          },
          {
            courseImg: require("../assets/images/img02.png"),
            hotCourseInfo_title: "爱语文，做有修养的人",
            mark: "4.8",
            peopleNum: "1210",
            price_now: "399",
            price_before: "￥499",
            hotCourseInfo_tips: "(会员免费)"
          },
          {
            courseImg: require("../assets/images/img02.png"),
            hotCourseInfo_title: "爱语文，做有修养的人",
            mark: "4.8",
            peopleNum: "1210",
            price_now: "399",
            price_before: "￥499",
            hotCourseInfo_tips: "(会员免费)"
          },
          {
            courseImg: require("../assets/images/img02.png"),
            hotCourseInfo_title: "爱语文，做有修养的人",
            mark: "4.8",
            peopleNum: "1210",
            price_now: "399",
            price_before: "￥499",
            hotCourseInfo_tips: "(会员免费)"
          },
        ],
        // 加入小组
        hotGroupList: [
          {
            title: '英语讨论组',
            total: '38',
            groupLeader: '刘天然',
            img: require('../assets/images/head06.png'),
          },
          {
            title: '英语讨论组',
            total: '38',
            groupLeader: '欧阳娜娜',
            img: require('../assets/images/head06.png'),
          },
          {
            title: '英语讨论组',
            total: '38',
            groupLeader: '张浩',
            img: require('../assets/images/head06.png'),
          },
        ],

      }
    }
  },
  mounted () {
    this.getHeight()
  },
  methods: {
    onItemClick() {
    },
    getHeight() {
      let topHeight = document.getElementsByClassName('tabBox')[0].offsetTop,
        diffHeight = window.screen.height - topHeight + 5;
      this.$nextTick(() => {
        this.$refs.contenBox.style.height = diffHeight + 'px'
      })
      // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
    },
  },
}
</script>

<style lang="less" scoped>
.studentDetailsBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  // 头部信息
  .headBox {
    position: relative;
    overflow: hidden;
    // height: 400px;
    /* 内容样式 */
    .studentInfoBg {
      width: 100%;
      // height: 600px;
      display: block;
      z-index: 0;
      filter: blur(9px);
    }
    .studentInfos {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      color: transparent;
      background: linear-gradient(to bottom, transparent, #000);
      color: #fff;

      .studentTopBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 40px;
        padding: 0 80px;
        .studentIcon {
          width: 70px;
          height: 70px;
        }
        .userImgBox {
          position: relative;
          .head {
            width: 226px;
            height: 226px;
            border-radius: 50%;
          }
          .headIcon {
            width: 47px;
            height: 47px;
            position: absolute;
            right: 30px;
            bottom: 0;
          }
        }
      }
    }
    .name {
      font-size: 44px;
      text-align: center;
      margin-top: 30px;
      img {
        width: 34px;
        height: 34px;
        margin-left: 20px;
      }
    }
    .profiles {
      font-size: 30px;
      text-align: center;
      padding: 20px 80px;
    }
    .userAbout {
      padding: 20px 80px;
      text-align: center;
      font-size: 30px;
      .hint {
        margin-top: 10px;
      }
    }
  }
  // tab栏
  /deep/.tabBox {
    .vux-tab-selected {
      color: #000;
      font-size: 36px;
      font-weight: bold;
      // border-bottom: 3px solid #04be02;
    }
  }
  // tab内容盒子
  .tabContentBox {
    overflow-y: auto;
    // 个人介绍
    .introduce {
      padding: 40px;
      /* 个人介绍 */
      .briefHead {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }

      .briefName {
        font-size: 28px;
        margin-left: 20px;
      }
      .briefName img {
        width: 26px;
        height: 26px;
        margin-left: 15px;
        border-radius: 50%;
        overflow: hidden;
        vertical-align: middle;
      }
      .briefTxt {
        font-size: 28px;
        color: #363636;
        text-indent: 2em;
        margin-top: 10px;
      }
    }
    /* 在学课程 */
    .courseBox {
      display: flex;
      background: #fff;
      padding: 20px 30px;
      .leftCont {
        width: 294px;
        height: 186px;
        margin-right: 20px;
        .courseImg {
          width: 100%;
          height: 100%;
        }
      }
      .rightCont {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 5px;
        .rightContTitle {
          font-size: 36px;
        }
        .curriculumTeacher {
          font-size: 24px;
          line-height: 2;
          color: #f88c0f;
        }
        .classHour {
          font-size: 24px;
        }
        .classHour text {
          color: #aaa;
          margin-left: 10px;
        }
        .process {
          color: #aaa;
          font-size: 24px;
        }
        .tick {
          width: 22px;
          height: 22px;
        }
        /deep/.progressBox {
          border-radius: 20px;
          .weui-progress__bar {
            border-radius: 20px;
            height: 10px;
            .weui-progress__inner-bar {
              border-radius: 20px;
              background-color: #1f7aff;
            }
          }
        }
      }
    }
    /* 在学班级 */
    .classBox {
      .classInfos {
        margin: 30px;
        display: flex;
      }
      .classInfos img {
        width: 135px;
        height: 135px;
        border-radius: 50%;
      }
      .classInfo {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5px 0;
        margin-left: 40px;
      }
      .classItem {
        display: flex;
        margin-bottom: 20px;
      }
      .classItem div {
        flex: 1;
        text-align: center;
        font-size: 28px;
      }
      .classItem div:not(:first-child) {
        border-left: 1px solid #f1f2f3;
      }
      .bottomLine {
        border-top: 2px solid #eee;
        border-bottom: 20px solid #f8f9fa;
      }
      .color_orange2 {
        color: #fda203;
      }
      .color_blue {
        color: #2873f3;
      }
    }
    // 加入收藏
    .collectBox {
      border-bottom: 20px solid #f8f9fa;

      a {
        color: currentColor;
        .item-ans {
          width: 100%;
          display: flex;
          padding: 20px;
          box-sizing: border-box;
          .courseImg {
            img {
              width: 312px;
              height: 182px;
              display: block;
            }
          }
          .hotCourseInfo {
            margin-left: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .hotCourseInfo_title {
              font-size: 30px;
            }
            .hotCourseInfo_count {
              font-size: 24px;
              color: #9d9d9d;
              margin-top: 10px;
            }

            .price_now {
              color: #f14927;
              font-size: 36px;
            }
            .price_before {
              font-size: 22px;
              color: #a5a5a5;
              text-decoration: line-through;
            }
            .hotCourseInfo_tips {
              font-size: 24px;
              color: #b48a59;
              margin-left: 24px;
            }
          }
        }
      }
      .deletBtn {
        background-color: #ff9300;
        width: 120px !important;
      }
      .shareBtn {
        background-color: #fe6805;
        width: 120px !important;
      }
    }
    // 加入小组
    .groupList {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 20px 26px;
      border-bottom: 20px solid #f8f9fa;
      .groupList-left {
        display: flex;
        flex-grow: 1;
        align-items: center;
        /* justify-content: center; */
        .picture {
          width: 150px;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .grouplist-type {
          margin: 0 40px;
          .grouplist-type-title {
            margin: 30px 0;
            font-size: 30px;
            font-weight: bold;
          }
          .grouplist-type-member {
            margin: 30px 0;
            color: #858585;
            font-size: 28px;
            img {
              width: 20px;
              height: 30px;
              margin-right: 20px;
            }
          }
        }
      }

      .groupList-right {
        color: #858585;
        font-size: 28px;
      }
    }
  }
}
</style>